<#if entity??>
    <#assign pageFont="编辑" >
<#else>
    <#assign pageFont="增加" >
</#if>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>角色${(pageFont)!}</title>
    <#include "../common/link.ftl" >
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <#include "../common/navbar.ftl" >
    <!--菜单回显-->
    <#assign currentMenu="role" >
    <#include "../common/menu.ftl" >
    <div class="content-wrapper">
        <section class="content-header">
            <h1>角色${(pageFont)!}</h1>
        </section>
        <section class="content">
            <div class="box">

                <#-- 表单 -->
                <form class="form-horizontal" action="/role/saveOrUpdate.do" method="post" id="editForm">

                    <input type="hidden" value="${(entity.id)!}" name="id">
                    <div class="form-group" style="margin-top: 10px;">
                        <label for="name" class="col-sm-2 control-label">角色名称：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="name" name="name" value="${(entity.name)!}"
                                   placeholder="请输入角色名称">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="sn" class="col-sm-2 control-label">角色编号：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="sn" name="sn" value="${(entity.sn)!}"
                                   placeholder="请输入角色编号">
                        </div>
                    </div>
                    <div class="form-group " id="role">
                        <label for="role" class="col-sm-2 control-label">分配权限：</label><br/>
                        <div class="row" style="margin-top: 10px">
                            <div class="col-sm-2 col-sm-offset-2">

                                <#-- 所有权限多选下拉框 -->
                                <select multiple class="form-control allPermissions" size="15">
                                    <#list (permissions)!as permission>
                                        <option value="${(permission.id)!}">${(permission.name)!}</option>
                                    </#list>
                                </select>
                            </div>

                            <div class="col-sm-1" style="margin-top: 60px;" align="center">
                                <div>

                                    <a type="button" class="btn btn-primary" style="margin-top: 10px" title="右移动"
                                       onclick="moveSelected('allPermissions', 'selfPermissions')">
                                        <span class="glyphicon glyphicon-menu-right"></span>
                                    </a>
                                </div>
                                <div>
                                    <a type="button" class="btn btn-primary " style="margin-top: 10px" title="左移动"
                                       onclick="moveSelected('selfPermissions', 'allPermissions')">
                                        <span class="glyphicon glyphicon-menu-left"></span>
                                    </a>
                                </div>
                                <div>
                                    <a type="button" class="btn btn-primary " style="margin-top: 10px" title="全右移动"
                                       onclick="moveAll('allPermissions', 'selfPermissions')">
                                        <span class="glyphicon glyphicon-forward"></span>
                                    </a>
                                </div>
                                <div>
                                    <a type="button" class="btn btn-primary " style="margin-top: 10px" title="全左移动"
                                       onclick="moveAll('selfPermissions', 'allPermissions')">
                                        <span class="glyphicon glyphicon-backward"></span>
                                    </a>
                                </div>
                            </div>
                            <div class="col-sm-2">

                                <#-- 该角色自己所拥有的权限 -->
                                <select multiple class="form-control selfPermissions" size="15" name="permissionIds">
                                    <#list (entity.permissions)! as permission>
                                        <option value="${(permission.id)!}">${(permission.name)!}</option>
                                    </#list>
                                </select>
                            </div>


                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-1 col-sm-6">
                            <button id="submitBtn" type="button" class="btn btn-primary">保存</button>
                            <button type="reset" class="btn btn-danger">重置</button>
                        </div>
                    </div>

                    <#-- 处理角色多选框的 js -->
                    <script>
                        //左移动或右移动 按钮(部分左移)
                        function moveSelected(src, target) {
                            $('.' + src + ' option:selected').appendTo($('.' + target));
                        }

                        //全左移动或全右移动按钮
                        function moveAll(src, target) {
                            $('.' + src + ' option').appendTo($('.' + target));
                        }

                        $(function () {
                            //保存按钮 点击后 提交表单
                            $('#submitBtn').on('click', function () {
                                //提交前，把右边的多选框（给员工分配角色）全部选中
                                $('.selfPermissions option').prop('selected', true);
                                
                                //提交表单
                                $('#editForm').ajaxSubmit(function (data) {
                                    checkData(data, "/role/list.do");
                                });
                            });

                            //去重：左边供选择的所有角色多选框作去重处理，主要是编辑员工的话，右边已选角色已经有了，左边可供选择的就不该再有
                            {
                                var allRoles = $('.allPermissions option');
                                var selfRoles = $('.selfPermissions option');
                                //把已选的遍历获取到已选的ids，然后全部的角色多选框里做遍历去重，用
                                var selfRolesIds = [];
                                selfRoles.each(function (index, dom) {
                                    selfRolesIds.push($(dom).val());
                                });
                                console.log(selfRolesIds);
                                allRoles.each(function (index, dom) {
                                    console.log($(dom).val());
                                    if ($.inArray($(dom).val(), selfRolesIds) != -1) {
                                        $(dom).remove();
                                    }
                                });
                            }

                        });
                    </script>
                </form>
            </div>
        </section>
    </div>
    <#include "../common/footer.ftl" >
</div>
</body>
</html>
